<template>
  <view class="bigbox rel">
    <image class="img abs" mode="aspectFill" src="/static/image/tu.png"/>
    <view class="rel content">
      <view class="po">
        <view class="flex-y-center">
          <view class="avatar_view flex-center"
                :class="[{'mt-md':userInfo.id && mineInfo.is_admin == 1 && configInfo.mine_page_type==1}]">
            <image mode="aspectFill" class="avatarUrl radius"
                   :src="userInfo.avatarUrl||`https://api.huixuananmm.com/admin/farm/default-user.png`">
            </image>
          </view>
          <view class="f-big-title text-bold ml-md">
            <view class="max-300 ellipsis" style="margin-right:8rpx">
              {{ userInfo.nickName || '默认用户' }}
            </view>
          </view>
        </view>
        <view class="priceInfo fill-base radius-20">
          <view class="priceInfoTop pb-md b-1px-b rel">
            <view class="flex-center flex-column">
              <view class="num text-bold">{{ showPrice ? userMoney.canWithdraw : '*' }}</view>
              <view class="desc">可提现(元)</view>
            </view>
            <view class="flex-center flex-column">
              <view class="num text-bold">{{ showPrice ? userMoney.notRecorded : '*' }}</view>
              <view class="desc">未入账(元)</view>
            </view>
            <view class="lookImg radius-10 flex-center abs" @tap.stop="showPrice = !showPrice">
              <img src="./eye.png" alt="">
            </view>
          </view>

          <view class="priceInfoBtm mt-md mb-md">
            <view class="flex-center flex-column">
              <view class="num text-bold">{{ showPrice ? userMoney.accumulativeCommission : '*' }}</view>
              <view class="desc">累计佣金(元)</view>
            </view>
            <view class="flex-center flex-column">
              <view class="num text-bold">{{ showPrice ? userMoney.withdrawn : '*' }}</view>
              <view class="desc">已提现(元)</view>
            </view>
            <view class="flex-center flex-column">
              <view class="num text-bold">{{ showPrice ? userMoney.totalAmount : '*' }}</view>
              <view class="desc">总成交金额(元)</view>
            </view>
          </view>

          <view class="withdraw flex-center radius" @tap.stop="toWithdraw">
            我要提现
          </view>

        </view>
        <!-- <view class="titles">
          <image class="fanhui" mode="widthFix" src="./fanhui.png" />
          <view class="mingxi">分销明细</view>
        </view> -->
        <!--        <view class="words">
                  <view class="left">
                    <view class="price">{{ yue }}</view>
                    <view class="msg"> 提示金额</view>
                  </view>
                  <view class="right">提现</view>
                </view>-->
        <view class="kuai">
          <view class="contents">
            <view class="con_title">我的返佣</view>
            <view class="lines">
              <view>一级返佣</view>
              <view>{{ firstRebate }}元</view>
            </view>
            <view class="lines" v-if='showerji'>
              <view>二级返佣</view>
              <view>{{ secondRebate }}元</view>
            </view>
          </view>
          <view class="contents">
            <view class="con_title">我的推广者</view>
            <view class="lines">
              <view>上级</view>
              <view>{{ superior }}</view>
            </view>
            <view class="lines" v-if='showerji'>
              <view>下级</view>
              <view>{{ lowerLevel }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="thebox">
        <view class="top_title">
          <view class="con_title top_left">我的邀请</view>
          <image class="rights" mode="widthFix" src="./rights.png"/>
          <view class="all" @tap.stop="toJump">查看全部
          </view>
        </view>
      </view>

      <view class="otherContent fill-base radius-20">
        <view class="flex-column otherItem" v-for="(item, index) in dataList" :key="index">
          <view class="desc">{{ item.label }}</view>
          <view class="num text-bold">{{ item.num }}</view>
        </view>

      </view>
    </view>
  </view>
</template>

<script>
import {
  mapState,
  mapActions,
  mapMutations
} from "vuex"

export default {
  name: "index",
  data() {
    return {
      showPrice: true,
      yue: 0,
      notRecord: 0,
      showerji: true,
      fanyong1: 0,
      fanyong2: 0,
      tuiguang1: [],
      tuiguang2: [],
      shangji1: '',
      shangji2: '',
      dataList: [
        {
          label: '今日成交订单',
          num: 0,
        }, {
          label: '累计成交订单',
          num: 0,
        }, {
          label: '今日新增技师',
          num: 0,
        }, {
          label: '累计入驻技师',
          num: 0,
        }, {
          label: '今日邀请粉丝',
          num: 0,
        }, {
          label: '累计邀请粉丝',
          num: 0,
        }
      ],
      userMoney:{
        canWithdraw: 0,
        notRecorded: 0,
        accumulativeCommission: 0,
        withdrawn: 0,
        totalAmount: 0,
      },
      firstRebate: 0,
      secondRebate: 0,
      superior: 0,
      lowerLevel: 0,
      detail: {
        cash: 0
      }
    };
  },
  computed: mapState({
    configInfo: state => state.config.configInfo,
    mineInfo: state => state.user.mineInfo,
    wecom_staff: state => state.user.wecom_staff,
  }),
  async onLoad() {
    await this.getUserInfo()
    this.getConfig();
  },
  components: {},
  created() {
  },
  methods: {
    ...mapActions(['getUserInfo']),
    ...mapMutations(['updateUserItem', 'updateServiceItem', 'updateTechnicianItem', 'updateOrderItem']),
    async getConfig() {
      var that = this
      console.log('============this.mineInfo===========', this.mineInfo, typeof (this.mineInfo))
      let param = {
        id: that.mineInfo.id,
        openid: that.mineInfo.openid
      }
      let data = await that.$api.usernew.getUserFanyong(param);
      console.log('datadatadatadata', data)
      that.dataList[0]['num']=data.datalist['OrderToday']
      that.dataList[1]['num']=data.datalist['AllOrder']
      that.dataList[2]['num']=data.datalist['CoachToday']
      that.dataList[3]['num']=data.datalist['AllCoach']
      that.dataList[4]['num']=data.datalist['FansToday']
      that.dataList[5]['num']=data.datalist['AllFans']
      that.userMoney=data.userMoney
      that.firstRebate = data.firstRebate
      that.secondRebate = data.secondRebate
      that.superior = data.superior
      that.lowerLevel = data.lowerLevel
	  console.log(' that.userMoney', that.userMoney)
    },
    toWithdraw() {
      this.detail.cash = this.userMoney.canWithdraw
      if (this.userMoney.canWithdraw == 0) {
        this.$util.showToast({
          title: `暂无可提现金额哦`
        })
        return
      }
      this.$util.goUrl({
        url: `/user/pages/fenxiao/withdraw?type=adminuser`
      })
    },
    toJump() {
      this.$util.log('/user/pages/fenxiao/invitation')
      this.$util.toCheckLogin({
        url: '/user/pages/fenxiao/invitation'
      })
    },
  },
};
</script>

<style scoped lang="scss">
.top_title {
  overflow: hidden;
}

.avatar_view {
  width: 166rpx;
  height: 122rpx;
}

.avatarUrl {
  width: 122rpx;
  height: 122rpx;
}

.priceInfo {
  padding: 30rpx;
  margin-top: 40rpx;

  .priceInfoTop, .priceInfoBtm {
    display: flex;
    justify-content: space-around;
    height: 122rpx;
  }

  .lookImg {
    background: #a4fcda;
    top: 0;
    right: 0;
    padding: 4rpx;

    img {
      height: 40rpx;
      width: 40rpx;
    }
  }

  .withdraw {
    width: 100%;
    height: 80rpx;
    color: white;
    text-align: center;
    background: #0CAD7D;
    font-size: 34rpx;
  }
}

.num {
  font-size: 40rpx;
}

.desc {
  color: #999999;
}

.otherContent {
  padding: 32rpx;
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(2, 1fr);
  margin-top: 34rpx;

  .otherItem {
    margin-bottom: 40rpx;
    margin-left: 60rpx;
  }
}

.content {
  padding: 40rpx 20rpx;
}


.li {
  width: 100%;
  padding: 24upx 0upx;
  overflow: hidden;
  border-bottom: solid 1upx rgba(0, 0, 0, 0.2);
}

.li:last-child {
  border-bottom: none;
}

.times {
  font-size: 24upx;
  color: rgba(0, 0, 0, 0.4);
}

.li .title {
  font-size: 30upx;
}

.li .rights view:nth-child(1) {
  float: right;
  margin-left: 10upx;
  line-height: 48upx;
  height: 48upx;
}

.li .rights view:nth-child(2) {
  float: right;
  font-weight: bold;
  line-height: 48upx;
  height: 48upx;
}

.li .rights {
  width: 40%;
  overflow: hidden;
  font-size: 36upx;
  height: 48upx;
  transform: translateY(20%);
}

.li .lefts {
  float: left;
}


.ul {
  overflow: hidden;
}

.thebox {
  padding: 40upx;
  box-sizing: border-box;
  margin: 0 auto;
  margin-top: 32upx;
  background: #FFFFFF;
  border-radius: 26upx 26upx 26upx 26upx;
}

.top_left {
  float: left;
  width: 50%;
}

.top_left .eye {
  float: right;
  width: 40upx;
}

.top_left .hides {
  float: right;
  margin-left: 5upx;
  width: 40upx;
  font-size: 24upx;
  color: rgba(0, 0, 0, 0.4);
  width: 100upx;
}

.all {
  float: right;
  color: rgba(0, 0, 0, 0.4);
  font-size: 24upx;
  margin-right: 4upx;
}

.rights {
  width: 15upx;
  margin-left: 10upx;
  /* height: 32upx; */
  float: right;
}

.lines > view:nth-child(2) {
  font-size: 30upx;
  float: right;
}

.lines:nth-child(2) {
  margin-top: 30upx;
}

.lines:nth-child(3) {
  margin-top: 18upx;
}

.lines > view:nth-child(1) {
  font-size: 24upx;
  color: rgba(0, 0, 0, 0.6);
  float: left;
}

.lines {
  overflow: hidden;
}

.con_title {
  font-size: 32upx;
  font-weight: bold;
  position: relative;
  padding-left: 28upx;
}

.con_title::before {
  content: "";
  position: absolute;
  left: 0;
  width: 8upx;
  height: 32upx;
  background: #0CAD7D;
  border-radius: 4upx 4upx 4upx 4upx;
}

.contents {
  padding: 34upx 32upx;
  box-sizing: border-box;
  width: 328upx;
  height: 244upx;
  background: linear-gradient(160deg, #DDFFFD, #fff);
  border-radius: 26upx 26upx 26upx 26upx;
}

.kuai {
  display: flex;
  justify-content: space-between;
  margin-top: 32upx;
}

.words {
  overflow: hidden;
}

.words .left {
  float: left;
  margin-left: 42upx;
}

.words .right {
  float: right;
  margin-right: 40upx;
  width: 192upx;
  height: 68upx;
  line-height: 68upx;
  font-size: 30upx;
  color: white;
  text-align: center;
  transform: translateY(60%);
  background: #0CAD7D;
  border-radius: 20upx 20upx 20upx 20upx;
}

.msg {
  font-size: 24upx;
  color: rgba(0, 0, 0, 0.6);
  margin-top: 16upx;
}

.price {
  font-size: 48upx;
  color: #000;
}

.mingxi {
  text-align: center;
  color: #171725;
}

.fanhui {
  position: absolute;
  left: 50upx;
  line-height: 88upx;
  width: 88upx;
}

.titles {
  line-height: 88upx;
}

.img {
  width: 100%;
  height: 586upx;
  z-index: 0;
}

.po {
  width: 100%;
  height: 100%;
}

.bigbox {
  width: 100%;
  min-height: 100vh;
  background: #F6F6F6;
  padding-bottom: 50upx;
}
</style>
